<template>
	<view class="container">
		<view class="edit">
			<icon class="icon-edit"></icon>
		</view>
		<view class="account">
			<view class="user-avatar">
				<image></image>
				<text>Sunflower</text>
			</view>
			<view class="collect">
				<ul>
					<li>商品收藏<em>199</em></li>
					<li>优惠券<em>5</em></li>
				</ul>
			</view>
			<view class="orders">
				<view class="all">全部订单<em>查看全部<icon class="icon-arrow"></icon></em></view>
				<ul class="ls">
					<li>
						<icon class="icon-paid"></icon>
						<text>待付款</text>
					</li>
					<li>
						<icon class="icon-delivered"></icon>
						<text>待发货</text>
					</li>
					<li>
						<icon class="icon-received"></icon>
						<text class="now">3</text>
						<text>待收货</text>
					</li>
				</ul>
			</view>
		</view>
		<view class="goods">
			<view class="title">热销商品</view>
			<view class="list">
				<dl>
					<dt><image src="../../static/images/3.jpg"></image></dt>
					<dd>
						<h2>Joyong九阳新款保温电水壶自动断电保护 食品级内胆</h2>
						<p><em>￥</em>198.00</p>
					</dd>
				</dl>
				<dl>
					<dt><image src="../../static/images/3.jpg"></image></dt>
					<dd>
						<h2>Joyong九阳新款保温电水壶自动断电保护 食品级内胆</h2>
						<p><em>￥</em>198.00</p>
					</dd>
				</dl>
				<dl>
					<dt><image src="../../static/images/3.jpg"></image></dt>
					<dd>
						<h2>Joyong九阳新款保温电水壶自动断电保护 食品级内胆</h2>
						<p><em>￥</em>198.00</p>
					</dd>
				</dl>
				<dl>
					<dt><image src="../../static/images/3.jpg"></image></dt>
					<dd>
						<h2>Joyong九阳新款保温电水壶自动断电保护 食品级内胆</h2>
						<p><em>￥</em>198.00</p>
					</dd>
				</dl>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		methods: {
			//调用执行
		},
		mounted() {
			//直接执行
			wx.setBackgroundColor({
				backgroundColorTop: '#fa7343', // 顶部窗口的背景
			})
		}
	}
</script>

<style lang="scss">
	
	.container {
		overflow: hidden;
		&:after {
			content: '';
			width: 750rpx;
			height: 326rpx;
			position: absolute;
			top: 0;
			z-index: -99;
			background: #fa7343;
		}
	}
	.edit {
		display: flex;
		justify-content: flex-end;
		icon {
			color: #fff;
			padding: 20rpx 40rpx 30rpx;
			font-size: 54rpx;
		}
	}
	.account {
		width: 710rpx;
		margin: 0 auto;
		background: #fff;
		min-height: 626rpx;
		border-radius: 10rpx;
	}
	.user-avatar {
		display: flex;
		align-items: center;
		flex-direction: column;
		image {
			background: #ffc5b5;
			border-radius: 100%;
			width: 120rpx;
			height: 120rpx;
		}
		text {
			font-size: 36rpx;
			margin-top: 18rpx;
			color: #666;
		}
		transform: translate3d(0, -33%, 0);
	}
	.collect {
		//collect
		ul{
			display: flex;
			padding: 0 20rpx;
			li {
				width: 50%;
				text-align: center;
				border-right: 1rpx solid #d8d8d8;
				font-size: 24rpx;
				&:last-child {
					border-right: none;
				}
				em {
					color: #333;
					font-weight: 500;
					font-size: 48rpx;
				}
				color: #999;
			}
		}
	}
	.orders{
		margin: 56rpx 0 0;
		border-top: 1rpx solid #d8d8d8;
		.all {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: 500;
			em {
				color: #999;
				font-size: 24rpx;
				font-weight: normal;
				display: flex;
				align-items: center;
				icon {
					display: flex;  //
					font-size: 20rpx;
				}
			}
			padding: 40rpx 60rpx;
		}
		.ls {
			display: flex;
			padding: 0 10rpx;
			li {
				flex: 1;
				font-size: 24rpx;
				color: #666;
				position: relative;
				text-align: center;
				icon {
					display: block;
					font-size: 60rpx;
				}
				text {
					display: block;
					margin: 16rpx 0 0;
					&.now {
						width: 30rpx;
						height: 30rpx;
						font-size: 24rpx;
						position: absolute;
						left: 50%;
						top: 0;
						background: #f66027;
						color: #fff;
						border-radius: 100%;
						line-height: 30rpx;
						text-align: center;
						transform: translate3d(10rpx,-20rpx,0);
						margin: 0;
					}
				}
			}
		}
	}
	.goods {
		width: 710rpx;
		margin: 30rpx auto;
		.title {
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 16rpx;
			color: #666;
			&:before, &:after {
				content: '';
				border-top: 1rpx solid #d8d8d8;
				margin: 0 24rpx;
				flex: 1;
			}
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 14rpx;
			dl {
				width: 350rpx;
				margin-top: 10rpx;
				background: #fff;
				border-radius: 10rpx;
				overflow: hidden;
				font-size: 24rpx;
				dt {
					image {
						width : 350rpx;
						height: 350rpx;
					}
				}
				dd {
					padding: 10rpx 20rpx 20rpx;
					h2 {
						height: 74rpx;
						overflow: hidden;
						display: -webkit-box;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					p {
						display: flex;
						align-items: baseline;
						color: #ff5200;
						font-size: 28rpx;
						em {
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
